import React, { useState } from 'react';
import { Login } from '../Login';
import { SignIn } from '../Signin';
import styles from './AuthContainer.module.css';

export interface AuthContainerProps {
  onLogin?: (credentials: { username: string; password: string; rememberMe?: boolean }) => void;
  onSignIn?: (userData: {
    username: string;
    email: string;
    password: string;
  }) => void;
  onForgotPassword?: () => void;
  loading?: boolean;
  error?: string;
  className?: string;
}

export const AuthContainer: React.FC<AuthContainerProps> = ({
  onLogin,
  onSignIn,
  onForgotPassword,
  loading = false,
  error,
  className
}) => {
  const [isSignInMode, setIsSignInMode] = useState(false);

  const handleSwitchToSignIn = () => {
    setIsSignInMode(true);
  };

  const handleSwitchToLogin = () => {
    setIsSignInMode(false);
  };

  return (
    <div className={`${styles.authContainer} ${isSignInMode ? styles.signInActive : styles.loginActive} ${className || ''}`}>
      <div className={styles.authInner}>
        {/* Login组件 */}
        <div className={`${styles.loginCard}`}>
          <Login
            onLogin={onLogin}
            onForgotPassword={onForgotPassword}
            onSignUp={handleSwitchToSignIn}
            loading={loading}
            error={error}
          />
        </div>

        {/* SignIn组件 */}
        <div className={`${styles.signInCard}`}>
          <SignIn
            onSignIn={onSignIn}
            onLogin={handleSwitchToLogin}
            loading={loading}
            error={error}
          />
        </div>
      </div>
    </div>
  );
};

export default AuthContainer;
